<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/24
  Time: 18:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <%@include file="../../common/header.jsp"%>
    <%@include file="../../common/ruoyi.jsp"%>
    <script>
        var pager;
        var layer;
        $(function () {
            layui.use('layer',function () {
                layer=layui.layer;
            });
        });
        //查询角色信息
        function query(pageNo){
            $.ajax({
                //请求的地址
                url:"${pageContext.request.contextPath}/user.action?method=query&pageNo="+pageNo,
                //提交方式
                type:"post",
                //携带参数
                data:$("#userform").serialize(),
                //返回的数据的类型
                dataType:"json",
                //操作成功后的回调函数
                success:function(data){
                    $("#tb_user").empty();//清空
                    var list=data.data;    //list集合
                    for(var i=0;i<list.length;i++){
                        var info=list[i];//获取每一个信息
                        var status=null;
                        if (info.status==0)
                        {
                            status='启用';
                        }
                        else {
                            status='禁用';
                        }
                        var tr="<tr>" +
                            "<td>"+info.login_name+"</td>" +
                            "<td>"+info.user_name+"</td>" +
                            "<td>"+info.password+"</td>" +
                            "<td>"+info.email+"</td>" +
                            "<td>"+info.phonenumber+"</td>" +
                            "<td>"+info.sex+"</td>" +
                            "<td>"+status+"</td>" +
                            "<td>"+info.remark+"</td>" +
                            "<td>"+$("#op").html().replace("{user_id}",info.user_id).replace("{duser_id}",info.user_id)+"</td>" +
                            "</tr>";
                        $("#tb_user").append(tr);
                    }
                    pager=data;
                    //初始化页码信息
                    var str="当前页:"+data.pageNo+"/总页数:"+data.pages;
                    $("#pageinfo").html(str);
                    $("#txtCurPage").val(data.curPage);
                },
                error:function (e) {
                    alert(e);
                }
            });
        }
        $(function(){
            $("#btn2").click(function(){
                //获取要跳到的页码
                var pageNo=$("#txtCurPage").val();
                if(pageNo>pager.pages) pageNo=pager.pages;
                query(pageNo);
            });
        });

        $(function () {
            query(1);
        });
        function update() {

            $.ajax({
                type: "POST",
                url:"${pageContext.request.contextPath}/user.action?method=update",
                data:$("#form1").serialize(),
                dataType:'json',
                success:function(msg)
                {
                    layer.msg("修改成功");
                    query(pager.pageNo);
                },
                error:function (xhr,info,e) {
                    alert("错误："+info+e);
                }
            });
        }
        function deleteuser(user_id) {
            $.ajax({
                type:'GET',
                url:"${pageContext.request.contextPath}/user.action?method=deleteuser&user_id="+user_id,
                dataType:'json',
                success:function (msg) {
                    if (msg=1)
                    {
                        layer.msg("删除成功");
                    }
                    query(pager.pageNo);
                },
                error:function (xhr,info,e) {
                    alert("错误"+info+e);
                }
            });
        }
        function updateone(user_id) {
            $.ajax(
                {
                    type:'GET',
                    url:"${pageContext.request.contextPath}/user.action?method=updateone&user_id="+user_id,
                    dataType:'json',
                    success:function(msg)
                    {
                        $("#user_id").val(msg.user_id);
                        $("#login_name").val(msg.login_name);
                        $("#user_name").val(msg.user_name);
                        $("#password").val(msg.password);
                        $("#email").val(msg.email);
                        $("#phonenumber").val(msg.phonenumber);
                        $("#remark").val(msg.remark);
                        if (msg.sex=='男')
                        {
                            $("#boy").prop("checked",true);
                        }
                        else {
                            $("#girl").prop("checked",true);
                        }
                        if (msg.status=='0')
                        {
                            $("#qiyong").prop("checked",true);
                        }
                        else {
                            $("#jinyong").prop("checked",true);
                        }
                    },
                    error:function (xhr,info,e) {
                        alert("错误"+info+e);
                    }
                }
            );
        }

        function bindRole() {
            $.ajax({
                url:"${pageContext.request.contextPath}/user.action?method=bindRole",
                type:"get",
                dataType:"json",
                success:function(data){
                    //data:要遍历的数组，funciton,每一次循环要执行的函数：i:索引,e:每一个元素
                    $.each(data,function (i,e) {
                        $("#role").append("<option value="+e.role_id+">"+e.role_name+"</option>");
                    });
                },
                error:function (x,t,e) {
                   layer.msg("ERROR:"+t+e);
                }
            });
        }

        //绑定部门信息
        function bindDept() {
            $.ajax({
                url:"${pageContext.request.contextPath}/user.action?method=bindDept",
                type:"get",
                dataType:"json",
                success:function(data){
                    $.each(data,function (i,e) {
                        $("#dept").append("<option value="+e.dept_id+">"+e.area_name+"--"+e.dept_name+"</option>");
                    })
                },
                error:function (x,t,e) {
                    alert("ERROR:"+t+e);
                }
            });
        }

        $(function(){
            bindRole();
            bindDept();
        });
        function adduser() {
            $("#form1")[0].reset();
            $("#id").val(0);
        }
        function chongzhi() {
            $("#a")[0].reset();
            $("#b")[0].reset();
        }

    </script>
    <script type="text/html" id="op">
        <div class="hidden-sm hidden-xs action-buttons">
            <a class="green" href="#" data-toggle="modal" data-target="#myModal" onclick="updateone({user_id})">
                <i class="ace-icon fa fa-pencil "  ></i>编辑
            </a>
            <a class="red" href="#" onclick="deleteuser({duser_id})">
                <i class="ace-icon fa fa-trash-o "></i>删除
            </a>
        </div>
    </script>
</head>
<body>

<body>
<div class="col-sm-12 search-collapse">
    <form id="userform">
        <div class="select-list">
            <ul>
                <li>
                    用户名：<input type="text" name="user_name"  />
                </li>
                <li>
                    性别：<input type="text" name="sex"/>
                </li>
                <li>
                    用户备注：<input type="text" name="remark"/>
                </li>
                <li>
                    状态：<select name="status">
                    <option value="">所有</option>
                    <option value="0">启用</option>
                    <option value="1">禁用</option>
                </select>
                </li>
                <li>
                    <a class="btn btn-primary btn-rounded btn-sm" onclick="query(1)"><i class="fa fa-search"></i>&nbsp;搜索</a>
                    <a class="btn btn-warning btn-rounded btn-sm" onclick="chongzhi()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                </li>
            </ul>
        </div>
    </form>
</div>


<table class="table table-bordered table-hover">
    <caption>用户信息</caption>
    <thead>
    <tr>
        <th>登录名</th>
        <th>用户名</th>
        <th>密码</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>性别</th>
        <th>状态</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tb_user">
    </tbody>
</table>
<ul class="pagination">
    <li><span id="pageinfo"></span></li>
    <li><a href="javascript:void(0)" onclick="query(1)">首页</a></li>
    <li><a href="javascript:void(0)" onclick="query(pager.prev)">上页</a></li>
    <li><a href="javascript:void(0)" onclick="query(pager.next)">下页</a></li>
    <li><a href="javascript:void(0)" onclick="query(pager.last)">尾页</a></li>
    <li class="input-group">
        <input type="number" name="curPage" max="${pager.last}" min="1" step="1" id="txtCurPage"  style="height:28px" />
        <input type="button" class="button" value="Go" id="btn2"/>
    </li>
    </li>

</ul>
<div class="hidden-sm hidden-xs action-buttons" style="display: inline-block;font-size: 20px;margin-left:20px ;">
    <a class="view blue" onclick="adduser()" data-toggle="modal" data-target="#myModal">
        <i class="ace-icon fa fa-plus"></i>添加用户
    </a>
</div>
<%--<button style="font-size: 20px;background-color: #0e90d2;border: 0;color: white;border-radius: 10%">添加用户</button>--%>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="z-index: 5000">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body" >
                <form id="form1" >

                    <div class="form-group">
                        <label class="col-lg-12 control-label">登录名</label>
                        <div class="col-lg-12">
                            <input type="hidden" name="user_id" id="user_id" value="0"/>
                            <input type="text" class="form-control"  required placeholder="请输入登录名" name="login_name" id="login_name" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">用户名</label>
                        <div class="col-lg-12">
                            <input type="text" class="form-control"  required placeholder="请输入用户名" name="user_name" id="user_name" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-12 control-label">密码</label>
                        <div class="col-lg-12">
                            <input type="text" class="form-control"  required placeholder="请输入密码" name="password" id="password" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">邮箱</label>
                        <div class="col-lg-12">
                            <input type="text" class="form-control"  required placeholder="请输入邮箱" name="email" id="email" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">电话</label>
                        <div class="col-lg-12">
                            <input type="text" class="form-control"  required placeholder="请输入电话" name="phonenumber" id="phonenumber" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">性别</label>
                        <div class="col-lg-12">
                            <input type="radio" name="sex" id="boy" value="男" />男
                            <input type="radio" name="sex" id="girl" value="女"  />女
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">状态</label>
                        <div class="col-lg-12">
                            <input type="radio" name="status" value="0" id="qiyong"/>启用
                            <input type="radio" name="status" value="1" id="jinyong"/>禁用
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">角色</label>
                        <div class="col-lg-12">
                            <select id="role" name="role"  multiple></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">归属部门</label>
                        <div class="col-lg-12">
                            <select name="dept_id" id="dept" type="text"   ></select></td>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">备注</label>
                        <div class="col-lg-12">
                            <input type="text" name="remark" id="remark"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"   id="updateuser">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


</body>
</body>
</html>
<script>
    $("#updateuser").on("click", function(){
        var bootstrapValidator = $("#form1").data('bootstrapValidator');
        bootstrapValidator.validate();
        if(bootstrapValidator.isValid()){
            update();
        }
        else return;
    });
    $(document).ready(function() {
        $('#form1').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                user_name: {
                    message: '',
                    validators: {
                        notEmpty: {message:'名字不能为空'},
                        stringLength: {
                            min: 2,
                            max: 10
                        },
                        regexp: {
                            regexp: /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
                        }
                    }
                },
                email: {
                    message: '',
                    validators: {
                        notEmpty: {message:'邮箱不能为空'},
                        regexp: {
                            regexp: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/
                        }
                    }
                },
                phonenumber: {
                    message: '',
                    validators: {
                        notEmpty: {message:'手机号不能为空'},
                        regexp: {
                            regexp: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
                        }
                    }
                },
                remark: {
                    message: '',
                    validators: {
                        notEmpty: {message:'备注不能为空'},
                        stringLength: {
                            min: 0,
                            max: 30
                        }
                    }
                },
                password: {
                    message: '',
                    validators: {
                        notEmpty: {message:'密码不能为空'},
                        stringLength: {
                            min: 6,
                            max: 20
                        },
                        regexp: {
                            regexp:/^\d{6,20}$/
                        }
                    }
                },
            role: {
                message: '',
                validators: {
                    notEmpty: {message:'必须设置权限'},
                }
            },
                login_name: {
                    message: '',
                    validators: {
                        notEmpty: {message:'登录名不能为空'},
                        regexp: {
                            regexp:/^[a-zA-Z0-9_-]{4,16}$/
                        },
                        threshold: 2,//有2字符以上才发送ajax请求
                        remote: {//ajax验证。server result:{"valid",true or false}
                            url: "${pageContext.request.contextPath}/user.action",
                            message: '登录名已存在,请重新输入',
                            delay: 300,//ajax刷新的时间是1秒一次
                            type: 'POST',
                            //自定义提交数据，默认值提交当前input value
                            data: function(validator) {
                                return {
                                    userName : $("input[name=login_name]").val(),
                                    method : "checkUserName"//UserServlet判断调用方法关键字。
                                };
                            }
                        }
                    }
                }
            }
        });
    });
</script>